<!--
 * @Author: your name
 * @Date: 2020-08-26 09:57:31
 * @LastEditTime: 2020-08-31 19:09:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \img-merge\src\App.vue
-->
<template>
	<div id="app">
		<img-editor :options="options" ref="imgEditor">
			<div slot="top">注意：该材质上传图片打印包括虚线部分，虚线部分的图会打印到手机壳四周包边</div>
			<div slot="bottom">
				<button @click="test1">获取拼合图</button>
				<button @click="test2">获取原图裁剪图</button>
			</div>
		</img-editor>

		<div class="demo-wrap" v-if="show" @click="show=false">
			<img :src="demo" alt="">
		</div>
	</div>
</template>
<script>
import imgEditor from './index'
import iphoneImg from '@/assets/iPhone.png'
import iphoneImg2 from '@/assets/iPhone2.png'
import iphoneImg3 from '@/assets/iPhone3.png'
import iphoneMask from '@/assets/iPhone_mask.png'
import iphoneMask2 from '@/assets/iPhone_mask2.png'
import materialUrl2 from '@/assets/27.png'
import baozhenditu from '@/assets/抱枕-实底.png'
import baozhen from '@/assets/抱枕-镂空.png'
import coverImg from '@/assets/cover.jpg'
import coverImg2 from '@/assets/userimg.jpg'
import b1 from '@/assets/b1.png'
import b2 from '@/assets/b2.png'
import b22 from '@/assets/b22.png'
import b3 from '@/assets/b3.png'
import b4 from '@/assets/b4.png'
import kuxiong from '@/assets/kuxiong.png'
import bg1 from '@/assets/bg1.jpeg'
import bg2 from '@/assets/bg2.jpeg'

import bb1 from '@/assets/bb1.png'
import bb2 from '@/assets/bb2.png'
import bb3 from '@/assets/bb3.png'

import 底图 from '@/assets/底图.png'
import 覆盖图 from '@/assets/覆盖图.png'
import 形状图 from '@/assets/形状图.png'

export default {
	components:{
		imgEditor
	},
	data(){
		return{
			options:{
				materialUrl:底图,
				materialUrl2:null,
				shapeMask:形状图,
				coverUrl:覆盖图,
				pasterImgUrl:'https://xbz-vue.oss-cn-shenzhen.aliyuncs.com/userimg.jpg',
				bgImgUrl:bg1,
				decorateImg:null,
				boxWidth:200,
				boxHeight:200,
				// bgImgUrl:'https://img01.songzhaopian.cn/eg/2019/09/29/0b6b738e-88e3-4536-8df7-aa4460774b8b.jpg?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1',
				// x:162,
				// y:1195,
				// w:890,
				// h:709,
				autoResize:false,
				allowChangePoster:false,
				printBorder:false,
				borderRatio:9/71,
				// history:{
				// 	angle: 20,
				// 	boxH: 356,
				// 	boxW: 357,
				// 	flip: 1,
				// 	h: 361.4180911667415,
				// 	w: 380.440095964991,
				// 	x: -103.22004798249549,
				// 	y: -2.709045583370738,
				// },
				area:{
					x:206,
					y:151,
					w:148,
					h:207,
				}

			},
			show:false,
			demo:''
		}
	},
	methods:{
		test1(){
			this.$refs.imgEditor.output({
				clipSize:375,
				merge:true
			}).then(({blob,coord})=>{
				var url=URL.createObjectURL(blob)
				console.log(coord)
				this.demo=url
				this.show=true
			})
		},
		test2(){
			this.$refs.imgEditor.output({
				clipSize:750,
				merge:false
			}).then(({blob})=>{
				var url=URL.createObjectURL(blob)
				console.log(url)
				this.demo=url
				this.show=true
			})
		}
	}
}
</script>
<style lang="scss">
.demo-wrap{
	height: 100vh;
	width: 100vw;
	padding: 1rem;
	box-sizing: border-box;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	img{
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}
</style>
